<template>
	<div class="page">
		<div class="chart-demo flex">
			<room-head></room-head>
			<div style="position: relative;width: calc(100% - 16.8rem);">
				<div class="flex width100 height100" style="position: absolute;overflow:hidden;">
					<roomItem style="margin: 0.45rem;"  v-for="item,index in roomList" :roomName="item.name"></roomItem>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import roomHead from './components/room_head.vue';
import roomItem from './components/room_item.vue';

export default {
	name: "room_page",
	components: { roomHead, roomItem },
	data() {
		return {
			// 起始索引
            startIndex: 0,
            // 是否开启了全屏
            isFullscreen: false,
            // 显示数量
            showNum: 5,
            // 循环函数
            interval: null,
			// 循环间隔
			step: 7000,
            // 机房列表
			roomAllList: [
				{name:'重邮机房'},
				{name:'重邮机房1'},
				{name:'重邮机房2'},
				{name:'重邮机房3'},
				{name:'重邮机房4'},
				{name:'重邮机房5'},
				{name:'重邮机房6'},
				{name:'重邮机房7'},
			]
		};
	},
	watch: {
        // 存在全屏的视频则停止滚动
        isFullscreen(val) {
            if (val) {
                if (this.interval) clearInterval(this.interval);
            } else {
                this.start()
            }
        }
    },
	computed: {
        roomList() {
            let startList = [];
            let endList = []
            if (this.roomAllList && this.roomAllList.length > 0) {
                for (let i in this.roomAllList) {
                    if (i < this.startIndex) {
                        endList.push(this.roomAllList[i])
                    } else {
                        startList.push(this.roomAllList[i])
                    }
                }
            }
            let list = startList.concat(endList);
            return list.splice(0, this.showNum + 1) || [];
        }
    },
	created() {
	},
	mounted() {
        this.$nextTick(() => {
            try {
                if (this.showNum < this.roomAllList.length) this.start()
            } catch (e) { console.log('计算出错', this.id) }

        })
    },
	methods: {
		// 开始循环
        start() {
            if (this.interval) clearInterval(this.interval);
            this.interval = setInterval(() => {
                if (this.roomAllList && this.roomAllList.length > 0) {
                    if (this.startIndex < this.roomAllList.length - 1) {
                        this.startIndex++
                    } else {
                        this.startIndex = 0
                    }
                }
            }, this.step)
        },
	},
	beforeDestroy() {
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import './css/hard.css';
@import './css/elasticity.css';
@import './css/index.css';
</style>
